<template>
	<view class="bg-all">
		<u-navbar title="实习宝藏"></u-navbar>
		<view class="stars">
			<view class="mystar">
				我的
				<u-icon name="star-fill" color="#2979ff" size="28"></u-icon>
				：{{ myStars }}
			</view>
		</view>
		<view class="toRecord">
			<u-button
				type="primary"
				class="tobtn"
				size="medium"
				v-for="(status, index) in taskStatus"
				:title="status"
				@click="record(index)"
				:key="index"
			>
				{{ status }}
			</u-button>
		</view>
		<view class="task-all">
			<view
				class="task-list"
				v-for="(item, index) in listAll"
				:key="index"
				:style="{ marginLeft: item.left }"
				@click="submitTask(item)"
			>
				<view class="task-item">{{ item.name }}</view>
				<view class="task-star"><u-rate :current="item.star" :disabled="true" :active-color="color"></u-rate></view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" height="300rpx">
			<view class="receive">
				<view class="title">是否进行提交</view>
				<view class="describe">{{ taskDescribe }}</view>
				<view class="btn">
					<u-button size="medium" type="primary" @click="cancel">取消</u-button>
					<u-button size="medium" type="primary" @click="down">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {},
			// 预设5个难度的数组
			list: [[], [], [], [], []],
			listAll: [],
			color: '#02b8fa',
			myStars: 0,
			show: false,
			taskRecord: [[], [], [], [], []],
			taskStatus: ['排行榜', '审核中', '已完成'],
			clickTaskId: -1,
			ml: '10rpx',
			taskStyle: { marginLeft: Math.floor(Math.random() * 300) + 'rpx' },
			taskDescribe: ''
		};
	},
	async onLoad() {
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		uni.showLoading({
			title: '正在获取'
		});
		// let taskRecord = await this.$u.api.getTaskRecord();
		let all = await this.$u.api.getTaskList();
		this.listAll = all.rows;
		// for (let i = 0; i < 15; i++) {
		// 	let random = Math.floor(Math.random() * 3);
		// 	this.listAll.push(JSON.parse(JSON.stringify(all.rows[random])));
		// }
		let tail = 'rpx';
		let snakenum = 0;
		this.listAll.forEach((task, index, arr) => {
			// 这是蛇形
			task.left = Math.floor(Math.random() * 300 + 50) + tail;
			let disLeft = Math.floor(index / 5);
			task.left = snakenum * 90;
			if (disLeft % 2 != 1) {
				snakenum++;
			} else {
				snakenum--;
			}
			// 这是随机
			// task.left = Math.floor(Math.random() * 15) *50
			// // console.log(task.left)
			// if (task.left < 0) {
			// 	task.left = 0;
			// } else if (task.left > 550) {
			// 	task.left = 550;
			// }

			task.left += tail;
			// console.log(task.name, task.left, index);
		});
		console.log(this.listAll);
		this.scrollRoll(70000);
	},
	methods: {
		submitTask(item) {
			console.log('领取任务', item.id, item.describe);
			this.taskDescribe = item.describe;
			this.show = true;
			this.clickTaskId = item.id;
		},
		rank() {
			// 跳转到星星数排行页面
			let mystar = this.myStars;
			uni.navigateTo({
				url: `./starRank?star=${mystar}`
			});
		},
		record(status) {
			if (status == 0) {
				this.rank();
				return;
			}
			uni.navigateTo({
				url: `./taskRecord?status=${status}`
			});
		},
		async down() {
			// 在这里确定是否领取任务
			console.log('down');
			let res = await this.$u.api.receiveTask(this.clickTaskId);
			let clickTaskId = this.clickTaskId;
			console.log('res', res);
			let taskRecord = await this.$u.api.getTaskRecord();
			taskRecord = taskRecord.rows;
			let patchTask = taskRecord.filter(task => {
				return task.taskId == clickTaskId;
			});
			console.log('taskres:', taskRecord);
			console.log('patch', patchTask);
			let patchTaskId = patchTask[patchTask.length - 1].id;
			uni.navigateTo({
				url: `./submitTask?taskId=${clickTaskId}&taskRecordId=${patchTaskId}`
			});
			this.show = false;
		},
		cancel() {
			this.show = false;
		},
		scrollRoll(height, duration = 200) {
			// 直接只用uni自带的api滚动到页面的最下面
			this.$nextTick(function() {
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: height,
						duration: duration
					});
				}, 50);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$distance: 100rpx;
.bg-all {
	// background-image: url('https://preview.qiantucdn.com/paixin/82/34/69/51M58PICaR758PICr96S7hyCF_PIC2018.jpg!w1024_new_small');
	background-image: url(/static/img/a.gif);
	// background-size: cover;
	padding: 10rpx;
	min-height: 100vh;
}
.stars {
	margin: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	.mystar {
		color: #fff;
	}
	.mybtn /deep/ .uni-button {
		// margin: 0;
	}
}
.toRecord {
	display: flex;
	justify-content: space-around;
	.tobtn {
		background-color: rgba($color: #3340ff, $alpha: 0.5);
	}
}
.task-all {
	// display: inline;
	.task-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 200rpx;
		border-radius: 50rpx;
		font-family: Monospace;
		// border: solid 1px #adadad;
		margin: 20rpx 0;
		background-color: rgba($color: #fefff9, $alpha: 0);
		// -webkit-filter: blur(1px);
		// background-image: url(/static/img/56.jpg) ;
		// background-position: center;
		// background-size: cover ;
		z-index: 1;
		.task-item {
			display: block;
			margin: 20rpx 0;
			color: #fff;
		}
		.task-star {
			// margin-top: 70rpx;
		}
	}
	// .task-list::after {
	//     content: '';
	// 	border-radius: 50rpx;
	//     position: absolute;
	//     top: 0;
	//     left: 0;
	//     right: 0;
	//     bottom: 0;
	//     background-image: url(/static/img/6.jpg) !important;
	//     background-position: center;
	//     background-size: 300rpx ;
	// 	 filter:blur(10px) contrast(.8);
	//     z-index: -1;
	// }
}

.tasklist {
	margin: 20rpx 10rpx;

	.diff {
		margin: 10rpx 25rpx;
	}

	.task {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		align-items: center;

		.taskevery {
			// height:230rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 10rpx 16rpx;
			width: 150rpx;
		}
	}
}
// 这里是点击任务之后的样式
.receive {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.title {
		font-size: 1.1em;
		margin: 2vh;
	}
	.describe {
		margin: 0 2vh 3vh 2vh;
	}
	.btn /deep/ .u-size-medium {
		padding: 0 50rpx;
		margin: 0 20rpx;
	}
}
</style>
